<!-- author:杨天然 -->
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
form {
	text-align: center;
	margin-top: 200px;
}

#register_div {
	margin-left: 400px;
	border: solid;
	z-index: 100;
	position: absolute;
	display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var $province = $("#province");
		$.ajax({
			url : "OneLevelServlet",
			type : "GET",
			contentType : "application/json",
			success : function(citys) {
				$.each(citys, function(index, data) {
					$province.append("<option>" + data + "</option>");
				});
			}
		});

		var $cities = $("#cities");
		$("#province").change(function() {
			var province = $("#province").val();
			$.ajax({
				url : "TwoLevelServlet?province=" + province,
				type : "GET",
				contentType : "application/json",
				success : function(citys) {
					$cities.text("");
					$.each(citys, function(index, data) {

						$cities.append("<option>" + data + "</option>");
					});
				}
			});
		});

		$(":button").click(function() {
			// is() 判断是否符合指定选择器的条件
			var flag = $("#register_div").is(":hidden");
			if (flag) {
				$("#login").fadeTo(1000, 0.2);

				$("#register_div").fadeIn(1000);

			} else {
				$("#login").fadeTo(1000, 1);

				$("#register_div").fadeOut(1000);
			}
			return false;
		});
		var $username = $("#name");
		var $password = $("#password");
		$username.change(function() {

			var username = $username.attr("value");
			var span = $("#usernamespan");
			$.ajax({
				url : "LoginCheckServlet",
				type : "POST",
				data : "userName=" + username,
				success : function(result) {
					if (result == 200) {
						span.text("用户名格式不正确");
					} else {
						span.text("用户名格式正确");
					}
				}
			});
		});
		$password.change(function() {
			var password = $password.attr("value");
			var span = $("#passwordspan");
			$.ajax({
				url : "LoginCheckServlet",
				type : "POST",
				data : "password=" + password,
				success : function(result) {
					if (result == 200) {
						span.text("密码格式不正确");
					} else {
						span.text("密码格式正确");
					}

				}
			});
		});

		$("#login").click(function() {
			var flag = $("#register_div").is(":hidden");
			if (!flag) {
				$("#login").fadeTo(1000, 1);

				$("#register_div").fadeOut(1000);
			}

		});

	});
</script>
</head>
<body>
	<div id="register_div">
		<form action="RegisterServlet" method="post"
			style="padding-top: 0px; margin-top: 0px">
			username : <input id="name" type="text" name="username" value="">
			<br> <br> <span id="usernamespan"></span> <br> <br>
			password：<input type="password" name="password" id="password">
			<br> <br> <span id="passwordspan"></span> <br> <br>
			confirm password:<input type="password" name="confirmpassword"
				id="confirmpassword"> <br> <br> sex : <input
				type="radio" name="gender" checked="checked" value="0"> boy
			<input type="radio" name="gender" value="1"> girl <br> <br>
			idCard：<input type="text" id="idCard" name="idCard"> type:<input
				type="radio" name="type" value="0">儿童票 <input type="radio"
				name="type" value="1">成人票 <br> <br> 省份： <select
				id="province">
				<option>请选择省份</option>
				<c:forEach items="${sessionScope.provinces }" var="province">
					<option>${province }</option>
				</c:forEach>
			</select> 城市： <select id="cities">
				<option>请选择城市</option>
			</select> <br>
			<br> icon: <img id="userIcon" class="user-icon"
				src="images/icon.jpg"> <input type="hidden" id="icon"
				name="icon"> <br>
			<button id="registerButton">注册</button>
		</form>
		<iframe id="uploader" style="display: none"> </iframe>

		<br>
		<br> <!-- <input type="submit" name="submit" id="btn" value="提交"> -->
		</form>
	</div>

	<div id="login">
		<form action="LoginServlet" method="POST">
			username:<input type="text" name="username" id="username" /><span></span>
			<br> <br>password:<input type="text" name="password"
				id="password" /> <br> <br>验证码：<input type="text"
				name="check"> <img alt="图片" src="ValidateCodeServlet">
			<br> <br> <input type="checkbox" value="rememberMe"
				name="rememberMe">自动登录 <input type="submit" value="submit" /><input
				type="button" name="register" value="register">
		</form>
	</div>
	<script type="text/javascript">
		function f_valid(name) {
			var flag = true;
			var refexp = /^[a-zA-Z]{1}[a-zA-Z0-9_.]{4,19}$/;
			var boob = refexp.test(name);
			//使用正则表达式判断用户名
			if (!boob) {
				alert("用户名输入错误");
				return false;
			}
			return true;
		}

		//判断密码
		function f_password(password, confirmpassword) {
			var refexp = /^[a-zA-Z0-9]{6,10}$/;
			var tlag = refexp.test(password);
			if (password != confirmpassword) {
				alert("两次密码输入不同");
				return false;
			}

			if (!tlag) {
				alert("密码输入错误");
				return false;
			}
			return true;
		}

		//验证性别
		function f_sex(sex) {
			var checked = false;
			for (var i = sex.length - 1; i >= 0; i--) {
				var s = sex[i];
				checked = s.checked || sex[i].checked;
			}
			if (checked) {
				alert("性别" + checked);
				return true;
			}
			return false;

		}

		//验证身份证
		function f_auidCard(idCard) {
			var ref_idCard = /^(\d{6})(\d{4})(\d{8})$/;
			var ref_idCard2 = /^(\d{6})(\d{4})(\d{5})$/;
			var array;
			if (idCard.length == 18) {
				array = ref_idCard.exec(idCard);
				var flag = ref_idCard.test(idCard);
			}
			if (idCard.length == 15) {
				array = ref_idCard2.exec(idCard);
				var flag = ref_idCard2.test(idCard);
			}
			if (!flag) {
				alert("身份证输入错误");
				return false;
			}
			if (parseInt(array[2]) > 2000) {
				alert("身份证日期错误");
				return false;
			}
			return true;

		}

		window.onload = function() {
			var btn = document.getElementById("registerButton");
			btn.onclick = function() {

				var name = document.getElementById("name");
				var name2 = name.value;

				var password1 = document.getElementById("password");
				var password = password1.value;

				var confirmpassword1 = document
						.getElementById("confirmpassword");
				var confirmpassword = confirmpassword1.value;

				var sex = document.getElementsByTagName("radio");

				//身份证
				var idCard = document.getElementById("idCard").value;

				var email = document.getElementById("email").value;
				return f_testemail(email) && f_auidCard(idCard)
						&& f_valid(name2)
						&& f_password(password, confirmpassword);

			}

		};

		function f_testemail(email) {
			var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			if (!reg.test(email)) {
				alert("邮箱格式不正确");
				return false;
			}
			return true;
		}

		function flip() {
			var username = document.getElementById("name");
			username.value = "";
		}

		function insertElement() {
			var add = document.getElementById("p");
			p.innerHTML = "<input type='button' value='添加' onclick='insertElement()'>";
		}
	</script>
</body>
</html>